import { colors } from '@/constants/colors'
import { Feather } from '@expo/vector-icons'
import { useState } from 'react'
import { View, Image, TouchableOpacity, Modal, Text } from 'react-native'

type ItemProps = {
  title: string
  thumbnailUrl: string
  genre: string
  platform: string
  publisher: string
  developer: string
  releaseDate: string
}

export const Item = (props: ItemProps) => {
  const [isModalVisible, setIsModalVisible] = useState(false)

  const openModal = () => setIsModalVisible(true)
  const closeModal = () => setIsModalVisible(false)

  return (
    <>
      <TouchableOpacity onPress={openModal}>
        <View
          className={`rounded-lg border border-neutral-300 border-opacity-5 
          dark:border-neutral-700`} 
        >
          <Image source={{
            uri: props.thumbnailUrl
          }} className='h-48 object-cover rounded-lg' />
        </View>
      </TouchableOpacity>
      <Modal
        animationType='fade'
        visible={isModalVisible}
        transparent={true}
      >
        <View className='flex-1 p-6 justify-center bg-neutral-900/90'>
          <View className='border border-neutral-300 rounded-lg border-opacity-5 dark:border-neutral-700' >
            <Image source={{
              uri: props.thumbnailUrl
            }} className='h-52 object-cover rounded-t-md'
            />
            <View className='flex flex-row flex-wrap gap-4 p-6 bg-neutral-100 dark:bg-neutral-900 rounded-b-md'>
              <Text className='dark:text-neutral-100'>Gênero:  {props.genre}</Text>
              <Text className='dark:text-neutral-100'>Plataforma:  {props.platform}</Text>
              <Text className='dark:text-neutral-100'>Desenvolvedora:  {props.developer}</Text>
              <Text className='dark:text-neutral-100'>Publisher:  {props.publisher}</Text>
              <Text className='dark:text-neutral-100'>Data de lançamento:  {props.releaseDate}</Text>
            </View>
          </View>
          <Feather
            className='mx-auto p-2 bg-neutral-700/60 rounded-full mt-6'
            name='x'
            size={32}
            color={colors.white}
            onPress={closeModal}
          />
        </View>
      </Modal>
    </>
  )
}
